<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		* {
			padding: 0;
			margin: 0;
			box-sizing: border-box;
		}
		
		.tu {
			background: url(images/4a15d8883775742e3efbb850ae14def7.png);
			width: 190px;
			height: 260px;
		}
		
		h1 {
			color: white;
			text-align: center;
			padding-top: 10%;
		}
		
		p {
			margin-top: 120px;
			font-size: 18px;
			text-align: center;
			color: white;
		}
		
		.daoshu {
			text-align: center;
			margin-top: 10px;
		}
		
		.daoshu span {
			display: inline-block;
			width: 30px;
			line-height: 30px;
			color: white;
			background: rgba(0, 0, 0, .5);
		}
	</style>

	<body>
		<div class="tu">
			<h1>倒计时</h1>
			<p><span id="x">18:00</span>场倒计时</p>
			<div class="daoshu">
				<span id="s"></span>
				<span id="f"></span>
				<span id="m"></span>
			</div>
		</div>
		<script type="text/javascript">
			function GetRTime() {
				var x = document.querySelector("#x")
				var b1 = document.querySelector("#s");
				var b2 = document.querySelector("#f");
				var b3 = document.querySelector("#m");
				var sy = new Date('2019/9/4 20:00:00');
				var dq = new Date();
				var t = sy.getTime() - dq.getTime();
				if(t > 0) {
					var h = Math.floor(t / 1000 / 60 / 60);
					console.log(h)
					var m = Math.floor(t / 1000 / 60 % 60);
					var s = Math.floor(t / 1000 % 60);
					h < 10 ? h = '0' + h : h = h;
					m < 10 ? m = '0' + m : m = m;
					s < 10 ? s = '0' + s : s = s;
					b1.innerHTML = h;
					b2.innerHTML = m;
					b3.innerHTML = s;
				} else {
					b1.innerHTML = ("你");
					b2.innerHTML = ("死");
					b3.innerHTML = ("了");
				}
			}
			GetRTime();
			setInterval(GetRTime, 1000)
		</script>
	</body>

</html>